<template>
  <div class="road-map-container">
    <!-- 地图容器 -->
    <div ref="roadMapView" class="road-map-view"></div>

    <!-- 推荐道路快速选择面板 -->
    <div class="recommended-routes-panel">
      <el-card class="routes-card">
        <div class="card-title" @click="toggleRoutesPanel">
          <div class="title-content">
            <el-icon><Star /></el-icon>
            推荐路线
          </div>
          <el-icon class="collapse-icon" :class="{ 'is-collapsed': !showRoutesPanel }">
            <ArrowDown />
          </el-icon>
        </div>
        <el-collapse-transition>
          <div v-show="showRoutesPanel" class="routes-grid">
            <div
              v-for="route in recommendedRoutes"
              :key="route.type"
              class="route-card"
              :class="{ active: selectedRecommendedRoute === route.type }"
              @click="selectRecommendedRoute(route)"
            >
              <div class="route-icon">
                <el-icon :size="24" :color="route.color">
                  <component :is="route.icon" />
                </el-icon>
              </div>
              <div class="route-info">
                <h4>{{ route.name }}</h4>
                <p>{{ route.description }}</p>
                <div class="route-stats">
                  <span class="time">{{ route.estimatedTime }}</span>
                  <span class="difficulty" :class="route.difficulty">{{ route.difficultyText }}</span>
                </div>
              </div>
              <div class="route-action">
                <el-button size="small" type="primary" @click.stop="showRouteDetails(route)">
                  查看
                </el-button>
              </div>
            </div>
          </div>
        </el-collapse-transition>
      </el-card>
    </div>

    <!-- 搜索控制面板 -->
    <div class="search-control-panel">
      <el-card class="search-card">
        <div class="card-title">
          <el-icon><Guide /></el-icon>
          地图控制
        </div>
        <el-collapse v-model="activeCollapse">
          <!-- 图层显示控制 -->
          <el-collapse-item title="图层显示控制" name="layers">
            <el-space direction="vertical" alignment="stretch" size="small">
              <el-checkbox v-model="layerVisibility.building"
                @change="toggleLayerVisibility('building')">
                <el-icon><House /></el-icon> 建筑物
              </el-checkbox>
              <el-checkbox v-model="layerVisibility.facilities"
                @change="toggleLayerVisibility('facilities')">
                <el-icon><Service /></el-icon> 设施
              </el-checkbox>
              <el-checkbox v-model="layerVisibility.roads"
                @change="toggleLayerVisibility('roads')">
                <el-icon><Guide /></el-icon> 道路
              </el-checkbox>
            </el-space>
          </el-collapse-item>

          <!-- 道路搜索 -->
          <el-collapse-item title="道路搜索" name="roadSearch">
            <el-space direction="vertical" alignment="stretch" size="small">
              <el-input
                v-model="roadSearchText"
                placeholder="输入道路名称搜索"
                clearable
                @keyup.enter="searchRoadByName"
              >
                <template #append>
                  <el-button @click="searchRoadByName" :icon="Search" />
                </template>
              </el-input>
              <el-select v-model="selectedRoadType" placeholder="按道路类型筛选" clearable @change="filterRoadsByType">
                <el-option label="全部类型" value="" />
                <el-option-group label="基础道路类型">
                  <el-option label="主干道" value="主干道" />
                  <el-option label="人行道" value="人行道" />
                  <el-option label="自行车道" value="自行车道" />
                  <el-option label="其他" value="其他" />
                </el-option-group>
                <el-option-group label="校园推荐路线">
                  <el-option label="去图书馆推荐路线" value="去图书馆推荐路线" />
                  <el-option label="去食堂推荐路线" value="去食堂推荐路线" />
                  <el-option label="去宿舍推荐路线" value="去宿舍推荐路线" />
                  <el-option label="去教学楼推荐路线" value="去教学楼推荐路线" />
                  <el-option label="去体育馆推荐路线" value="去体育馆推荐路线" />
                  <el-option label="去实验楼推荐路线" value="去实验楼推荐路线" />
                  <el-option label="校园观光路线" value="校园观光路线" />
                  <el-option label="晨跑推荐路线" value="晨跑推荐路线" />
                </el-option-group>
              </el-select>

              <el-button type="primary" @click="showAllRoads" size="small">
                <el-icon><Refresh /></el-icon>
                显示所有道路
              </el-button>
            </el-space>
          </el-collapse-item>

          <!-- 地图工具 -->
          <el-collapse-item title="地图工具" name="mapTools">
            <el-space direction="vertical" alignment="stretch" size="small">
              <el-button @click="zoomToFullExtent" size="small">
                <el-icon><FullScreen /></el-icon>
                缩放至全图
              </el-button>
              <el-button @click="clearHighlights" size="small">
                <el-icon><Delete /></el-icon>
                清除高亮
              </el-button>
              <el-button @click="showRoadStatistics" size="small">
                <el-icon><DataAnalysis /></el-icon>
                道路统计
              </el-button>
            </el-space>
          </el-collapse-item>
        </el-collapse>
      </el-card>
    </div>

    <!-- 帮助按钮 -->
    <div class="help-button" @click="showHelpPanel = true">
      <el-icon><QuestionFilled /></el-icon>
      <span>使用帮助</span>
    </div>

    <!-- 帮助面板 -->
    <el-drawer
      v-model="showHelpPanel"
      direction="rtl"
      size="360px"
      :with-header="false"
      class="custom-drawer"
    >
      <div class="help-panel">
        <div class="drawer-header">
          <h2>校园道路地图使用指南</h2>
          <div class="version-tag">标准版</div>
        </div>
        <div class="help-content">
          <h3>基本操作</h3>
          <ol>
            <li>点击地图上的道路查看详细信息</li>
            <li>使用搜索框按名称查找道路</li>
            <li>通过类型筛选查看特定类型道路</li>
            <li>使用图层控制显示/隐藏不同要素</li>
          </ol>

          <h3>道路类型说明</h3>
          <h4>基础道路类型</h4>
          <div class="road-type-legend">
            <div class="legend-item">
              <div class="road-line main"></div>
              <span>主干道</span>
            </div>
            <div class="legend-item">
              <div class="road-line secondary"></div>
              <span>次干道</span>
            </div>
            <div class="legend-item">
              <div class="road-line branch"></div>
              <span>支路</span>
            </div>
            <div class="legend-item">
              <div class="road-line walk"></div>
              <span>步行道</span>
            </div>
          </div>

          <h4>校园推荐路线</h4>
          <div class="road-type-legend">
            <div class="legend-item">
              <div class="road-line library"></div>
              <span>去图书馆推荐路线</span>
            </div>
            <div class="legend-item">
              <div class="road-line canteen"></div>
              <span>去食堂推荐路线</span>
            </div>
            <div class="legend-item">
              <div class="road-line dormitory"></div>
              <span>去宿舍推荐路线</span>
            </div>
            <div class="legend-item">
              <div class="road-line teaching"></div>
              <span>去教学楼推荐路线</span>
            </div>
            <div class="legend-item">
              <div class="road-line gym"></div>
              <span>去体育馆推荐路线</span>
            </div>
            <div class="legend-item">
              <div class="road-line lab"></div>
              <span>去实验楼推荐路线</span>
            </div>
            <div class="legend-item">
              <div class="road-line sightseeing"></div>
              <span>校园观光路线</span>
            </div>
            <div class="legend-item">
              <div class="road-line jogging"></div>
              <span>晨跑推荐路线</span>
            </div>
          </div>

          <h3>快捷功能</h3>
          <ul class="feature-list">
            <li><el-icon><Star /></el-icon> 道路信息查询</li>
            <li><el-icon><Star /></el-icon> 类型筛选显示</li>
            <li><el-icon><Star /></el-icon> 统计分析功能</li>
          </ul>
        </div>
      </div>
    </el-drawer>

    <!-- 推荐路线详情面板 -->
    <el-drawer
      v-model="showRouteDetailPanel"
      direction="rtl"
      size="400px"
      :with-header="false"
      class="custom-drawer route-detail-drawer"
    >
      <div v-if="selectedRouteDetail" class="route-detail">
        <div class="route-header">
          <div class="route-title">
            <el-icon :size="32" :color="selectedRouteDetail.color">
              <component :is="selectedRouteDetail.icon" />
            </el-icon>
            <div>
              <h2>{{ selectedRouteDetail.name }}</h2>
              <p class="route-subtitle">{{ selectedRouteDetail.description }}</p>
            </div>
          </div>
        </div>

        <div class="route-preview-image">
          <div class="preview-container" :style="{ backgroundImage: `url(${selectedRouteDetail.previewImage})` }">
            <div class="preview-overlay">
              <el-button type="primary" @click="highlightRecommendedRoute" size="small">
                <el-icon><Location /></el-icon>
                在地图上查看
              </el-button>
            </div>
          </div>
        </div>

        <div class="route-stats-detail">
          <el-row :gutter="16">
            <el-col :span="8">
              <div class="stat-item">
                <div class="stat-value">{{ selectedRouteDetail.estimatedTime }}</div>
                <div class="stat-label">预计时间</div>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="stat-item">
                <div class="stat-value">{{ selectedRouteDetail.distance }}</div>
                <div class="stat-label">路线长度</div>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="stat-item">
                <div class="stat-value" :class="selectedRouteDetail.difficulty">{{ selectedRouteDetail.difficultyText }}</div>
                <div class="stat-label">难度等级</div>
              </div>
            </el-col>
          </el-row>
        </div>

        <el-divider />

        <div class="route-features">
          <h3>路线特色</h3>
          <div class="features-list">
            <div v-for="feature in selectedRouteDetail.features" :key="feature" class="feature-item">
              <el-icon><Star /></el-icon>
              <span>{{ feature }}</span>
            </div>
          </div>
        </div>

        <div class="route-recommendations">
          <h3>推荐理由</h3>
          <p>{{ selectedRouteDetail.recommendation }}</p>
        </div>

        <div class="route-tips">
          <h3>温馨提示</h3>
          <ul>
            <li v-for="tip in selectedRouteDetail.tips" :key="tip">{{ tip }}</li>
          </ul>
        </div>

        <div class="route-actions">
          <el-button type="primary" @click="selectRecommendedRouteOnMap" size="default" style="width: 100%;">
            <el-icon><Guide /></el-icon>
            选择此路线
          </el-button>
        </div>
      </div>
    </el-drawer>

    <!-- 道路详情面板 -->
    <el-drawer
      v-model="showRoadInfo"
      direction="rtl"
      size="360px"
      :with-header="false"
      class="custom-drawer"
    >
      <div v-if="selectedRoad" class="road-detail">
        <div class="road-header">
          <div class="road-title">
            <h2>{{ selectedRoad.attributes.name || '未命名道路' }}</h2>
            <el-tag size="small" :type="getRoadTypeColor(selectedRoad.attributes.RoadType)">
              {{ selectedRoad.attributes.RoadType || '未知类型' }}
            </el-tag>
          </div>
        </div>

        <div class="road-image-container">
          <div class="road-image" :class="getRoadImageClass(selectedRoad.attributes.RoadType)"></div>
        </div>

        <el-descriptions :column="1" border class="road-info">
          <el-descriptions-item label="道路名称">
            {{ selectedRoad.attributes.name || '未命名' }}
          </el-descriptions-item>
          <el-descriptions-item label="道路类型">
            {{ selectedRoad.attributes.RoadType || '未知' }}
          </el-descriptions-item>
          <el-descriptions-item label="道路ID">
            {{ selectedRoad.attributes.OBJECTID }}
          </el-descriptions-item>
        </el-descriptions>

        <div class="road-actions">
          <el-button type="primary" @click="highlightRoad" size="small">
            <el-icon><Location /></el-icon>
            高亮显示
          </el-button>
          <el-button type="success" @click="zoomToRoad" size="small">
            <el-icon><ZoomIn /></el-icon>
            缩放至此
          </el-button>
        </div>
      </div>
    </el-drawer>

    <!-- 搜索结果面板 -->
    <el-dialog
      v-model="searchResultVisible"
      title="道路搜索结果"
      width="600px"
      class="search-result-dialog"
    >
      <div v-if="searchResults.length > 0">
        <div class="result-summary">
          找到 {{ searchResults.length }} 条道路记录
        </div>
        <div class="search-results">
          <div
            v-for="(item, index) in searchResults"
            :key="index"
            class="result-item"
            @click="selectSearchResult(item)"
          >
            <div class="result-header">
              <h4>{{ item.attributes.name || '未命名道路' }}</h4>
              <el-tag size="small" :type="getRoadTypeColor(item.attributes.RoadType)">
                {{ item.attributes.RoadType || '未知类型' }}
              </el-tag>
            </div>
            <div class="result-info">
              <div class="road-id">ID：{{ item.attributes.OBJECTID }}</div>
            </div>
          </div>
        </div>
      </div>
      <div v-else>
        <el-empty description="未找到匹配的道路"></el-empty>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="searchResultVisible = false">关闭</el-button>
        </span>
      </template>
    </el-dialog>

    <!-- 道路统计面板 -->
    <el-dialog
      v-model="statisticsVisible"
      title="道路统计信息"
      width="600px"
    >
      <div class="statistics-content">
        <h4 style="margin-bottom: 16px; color: #409eff;">基础道路统计</h4>
        <el-row :gutter="20">
          <el-col :span="8">
            <el-statistic title="道路总数" :value="roadStatistics.total" />
          </el-col>
          <el-col :span="8">
            <el-statistic title="主干道" :value="roadStatistics.main" />
          </el-col>
          <el-col :span="8">
            <el-statistic title="次干道" :value="roadStatistics.secondary" />
          </el-col>
        </el-row>
        <el-row :gutter="20" style="margin-top: 20px;">
          <el-col :span="8">
            <el-statistic title="支路" :value="roadStatistics.branch" />
          </el-col>
          <el-col :span="8">
            <el-statistic title="步行道" :value="roadStatistics.walk" />
          </el-col>
          <el-col :span="8">
            <el-statistic title="其他" :value="roadStatistics.other" />
          </el-col>
        </el-row>

        <el-divider />

        <h4 style="margin-bottom: 16px; color: #67c23a;">校园推荐路线统计</h4>
        <el-row :gutter="20">
          <el-col :span="8">
            <el-statistic title="图书馆路线" :value="roadStatistics.library" />
          </el-col>
          <el-col :span="8">
            <el-statistic title="食堂路线" :value="roadStatistics.canteen" />
          </el-col>
          <el-col :span="8">
            <el-statistic title="宿舍路线" :value="roadStatistics.dormitory" />
          </el-col>
        </el-row>
        <el-row :gutter="20" style="margin-top: 20px;">
          <el-col :span="8">
            <el-statistic title="教学楼路线" :value="roadStatistics.teaching" />
          </el-col>
          <el-col :span="8">
            <el-statistic title="体育馆路线" :value="roadStatistics.gym" />
          </el-col>
          <el-col :span="8">
            <el-statistic title="实验楼路线" :value="roadStatistics.lab" />
          </el-col>
        </el-row>
        <el-row :gutter="20" style="margin-top: 20px;">
          <el-col :span="12">
            <el-statistic title="校园观光路线" :value="roadStatistics.sightseeing" />
          </el-col>
          <el-col :span="12">
            <el-statistic title="晨跑推荐路线" :value="roadStatistics.jogging" />
          </el-col>
        </el-row>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="statisticsVisible = false">关闭</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, reactive } from 'vue'
import { ElMessage } from 'element-plus'
import {
  Search, Guide, House, Service, QuestionFilled, Location,
  ZoomIn, FullScreen, Delete, DataAnalysis, Refresh, Star,
  Reading, HomeFilled, School, Trophy, Food,
  Camera, Timer, Tools, ArrowDown
} from '@element-plus/icons-vue'
import Map from '@arcgis/core/Map'
import MapView from '@arcgis/core/views/MapView'
import FeatureLayer from '@arcgis/core/layers/FeatureLayer'
import Graphic from '@arcgis/core/Graphic'
import Query from '@arcgis/core/rest/support/Query'
import gaodeLayer from '@/utils/GaoDeBaseLayer'

// 地图和视图
let map: __esri.Map
let view: __esri.MapView
const roadMapView = ref<HTMLDivElement>()

// 图层
let buildingLayer: __esri.FeatureLayer | null = null
let facilitiesLayer: __esri.FeatureLayer | null = null
let roadsLayer: __esri.FeatureLayer | null = null

// 图层URL
const buildingLayerUrl =
  'https://services8.arcgis.com/CmXfu09loK81if9H/arcgis/rest/services/GISRouteAnalysis/FeatureServer/0'
const facilitiesLayerUrl =
  'https://services8.arcgis.com/CmXfu09loK81if9H/arcgis/rest/services/GISRouteAnalysis/FeatureServer/1'
const roadsLayerUrl =
  'https://services8.arcgis.com/CmXfu09loK81if9H/arcgis/rest/services/GISRouteAnalysis/FeatureServer/2'

// 图层可见性控制
const layerVisibility = ref({
  building: true,
  facilities: true,
  roads: true,
})

// 控制折叠面板的展开状态
const activeCollapse = ref(['layers', 'roadSearch'])

// 搜索相关
const roadSearchText = ref('')
const selectedRoadType = ref('')
let searchResults: Graphic[] = []
const searchResultVisible = ref(false)

// 面板控制
const showHelpPanel = ref(false)
const showRoadInfo = ref(false)
const statisticsVisible = ref(false)
const showRouteDetailPanel = ref(false)
const showRoutesPanel = ref(true)

// 选中的道路和路线
let selectedRoad: Graphic | null = null
let highlightGraphic: __esri.Graphic | null = null
const selectedRecommendedRoute = ref('')
const selectedRouteDetail = ref<any>(null)

// 推荐路线数据
const recommendedRoutes = ref([
  {
    type: '去图书馆推荐路线',
    name: '图书馆路线',
    description: '通往图书馆的最佳路径',
    icon: Reading,
    color: '#8A2BE2',
    estimatedTime: '5-8分钟',
    distance: '450米',
    difficulty: 'easy',
    difficultyText: '简单',
    previewImage: 'https://picsum.photos/id/1043/400/200',
    features: ['路面平整', '绿化良好', '标识清晰', '安全便捷'],
    recommendation: '这条路线经过校园主干道，路面宽敞平整，两侧绿化良好，是前往图书馆的最佳选择。沿途设有休息座椅和指示牌，适合各种天气条件下通行。',
    tips: ['建议避开上下课高峰期', '雨天注意路面湿滑', '夜间有充足照明']
  },
  {
    type: '去食堂推荐路线',
    name: '食堂路线',
    description: '快速到达各个食堂',
    icon: Food,
    color: '#FF1493',
    estimatedTime: '3-5分钟',
    distance: '280米',
    difficulty: 'easy',
    difficultyText: '简单',
    previewImage: 'https://picsum.photos/id/1044/400/200',
    features: ['距离最短', '人流量大', '便民设施多', '24小时开放'],
    recommendation: '这是连接各个食堂的主要通道，距离短、效率高。沿途有便利店、ATM等便民设施，是用餐时间的热门路线。',
    tips: ['用餐高峰期人流较多', '注意礼让行人', '保持通道畅通']
  },
  {
    type: '去宿舍推荐路线',
    name: '宿舍路线',
    description: '回宿舍的安全路径',
    icon: HomeFilled,
    color: '#1E90FF',
    estimatedTime: '6-10分钟',
    distance: '520米',
    difficulty: 'easy',
    difficultyText: '简单',
    previewImage: 'https://picsum.photos/id/1045/400/200',
    features: ['安全性高', '夜间照明好', '监控覆盖', '环境安静'],
    recommendation: '这条路线安全性最高，夜间照明充足，监控设备完善。路线相对安静，适合晚归学生使用，是宿舍区的主要通道。',
    tips: ['夜间注意安全', '保持安静', '遵守宿舍管理规定']
  },
  {
    type: '去教学楼推荐路线',
    name: '教学楼路线',
    description: '上课的便捷通道',
    icon: School,
    color: '#FF8C00',
    estimatedTime: '4-7分钟',
    distance: '380米',
    difficulty: 'easy',
    difficultyText: '简单',
    previewImage: 'https://picsum.photos/id/1046/400/200',
    features: ['直达便捷', '无障碍通道', '雨棚覆盖', '指示清晰'],
    recommendation: '直达各教学楼的最便捷路线，设有无障碍通道和雨棚，即使恶劣天气也能舒适通行。沿途指示牌清晰，不易迷路。',
    tips: ['上课前10分钟出发', '注意教室编号', '携带学生证']
  },
  {
    type: '去体育馆推荐路线',
    name: '体育馆路线',
    description: '运动健身的活力路径',
    icon: Trophy,
    color: '#32CD32',
    estimatedTime: '8-12分钟',
    distance: '650米',
    difficulty: 'medium',
    difficultyText: '中等',
    previewImage: 'https://picsum.photos/id/1047/400/200',
    features: ['景色优美', '空气清新', '运动氛围', '设施完善'],
    recommendation: '这条路线经过校园运动区域，空气清新，景色优美。沿途可以看到其他运动的同学，营造良好的运动氛围，是前往体育馆的理想选择。',
    tips: ['穿着运动装备', '携带运动用品', '注意运动安全']
  },
  {
    type: '去实验楼推荐路线',
    name: '实验楼路线',
    description: '科研学习的专业通道',
    icon: Tools,
    color: '#DC143C',
    estimatedTime: '6-9分钟',
    distance: '480米',
    difficulty: 'medium',
    difficultyText: '中等',
    previewImage: 'https://picsum.photos/id/1048/400/200',
    features: ['学术氛围浓', '安全等级高', '设备先进', '环境安静'],
    recommendation: '通往实验楼的专业路线，安全等级高，环境相对安静，适合携带实验设备和资料。沿途学术氛围浓厚，是理工科学生的常用路线。',
    tips: ['携带学生证和实验证', '注意实验安全', '遵守实验室规定']
  },
  {
    type: '校园观光路线',
    name: '观光路线',
    description: '欣赏校园美景的最佳路径',
    icon: Camera,
    color: '#FFD700',
    estimatedTime: '15-25分钟',
    distance: '1200米',
    difficulty: 'easy',
    difficultyText: '简单',
    previewImage: 'https://picsum.photos/id/1049/400/200',
    features: ['风景如画', '历史文化', '拍照圣地', '休闲惬意'],
    recommendation: '这是校园最美的观光路线，经过主要景点和历史建筑，四季风景各异。适合新生熟悉校园、访客参观或日常休闲漫步。',
    tips: ['适合拍照留念', '注意保护环境', '尊重校园文化']
  },
  {
    type: '晨跑推荐路线',
    name: '晨跑路线',
    description: '健康生活的活力起点',
    icon: Timer,
    color: '#00FA9A',
    estimatedTime: '20-30分钟',
    distance: '1500米',
    difficulty: 'medium',
    difficultyText: '中等',
    previewImage: 'https://picsum.photos/id/1050/400/200',
    features: ['空气清新', '路面平整', '距离适中', '安全性好'],
    recommendation: '专为晨跑设计的环形路线，空气清新，路面平整，距离适中。早晨人流较少，安全性好，是保持健康生活方式的理想选择。',
    tips: ['建议6-8点晨跑', '注意热身运动', '携带饮用水']
  }
])

// 道路统计
const roadStatistics = reactive({
  total: 0,
  main: 0,
  secondary: 0,
  branch: 0,
  walk: 0,
  library: 0,
  canteen: 0,
  dormitory: 0,
  teaching: 0,
  gym: 0,
  lab: 0,
  sightseeing: 0,
  jogging: 0,
  other: 0
})

// 地图初始化
onMounted(async () => {
  await initMap()
  await loadLayers()
  await loadRoadStatistics()
})

// 初始化地图
async function initMap() {
  map = new Map({
    basemap: {
      baseLayers: [gaodeLayer],
    },
  })

  view = new MapView({
    container: roadMapView.value!,
    map: map,
    center: [116.79344073176162, 36.53820494873281],
    zoom: 16,
  })

  // 点击地图事件
  view.on('click', async (event) => {
    const hitResults = (await view?.hitTest(event))?.results as __esri.MapViewGraphicHit[]

    // 检查是否点击了道路
    const roadFeature = hitResults.find(
      (result) => result.layer?.id === roadsLayer?.id,
    )?.graphic

    if (roadFeature) {
      showRoadDetails(roadFeature)
    }
  })
}

// 加载图层
async function loadLayers() {
  try {
    // 创建建筑物图层 - 使用填充样式
    buildingLayer = new FeatureLayer({
      url: buildingLayerUrl,
      outFields: ['*'],
      visible: layerVisibility.value.building,
      renderer: {
        type: 'simple',
        symbol: {
          type: 'simple-marker',
          color: [255, 165, 0, 0.6], // 橙色半透明
          outline: {
            color: [255, 140, 0, 1], // 深橙色边框
            width: 2
          }
        }
      } as any,
      popupTemplate: {
        title: '建筑物信息',
        content: [
          {
            type: 'fields',
            fieldInfos: [
              { fieldName: 'name', label: '建筑名称' },
              { fieldName: 'BuildingType', label: '建筑类型' },
              { fieldName: 'OBJECTID', label: 'ID' }
            ]
          }
        ]
      }
    })

    // 创建设施图层 - 使用点样式
    facilitiesLayer = new FeatureLayer({
      url: facilitiesLayerUrl,
      outFields: ['*'],
      visible: layerVisibility.value.facilities,
      renderer: {
        type: 'simple',
        symbol: {
          type: 'simple-marker',
          color: [0, 150, 255, 0.8], // 蓝色
          size: 12,
          outline: {
            color: [0, 100, 200, 1], // 深蓝色边框
            width: 2
          },
          style: 'circle'
        }
      } as any,
      popupTemplate: {
        title: '设施信息',
        content: [
          {
            type: 'fields',
            fieldInfos: [
              { fieldName: 'name', label: '设施名称' },
              { fieldName: 'FacilityType', label: '设施类型' },
              { fieldName: 'OBJECTID', label: 'ID' }
            ]
          }
        ]
      }
    })

    // 创建道路图层 - 使用线样式，根据道路类型设置不同颜色
    roadsLayer = new FeatureLayer({
      url: roadsLayerUrl,
      outFields: ['*'],
      visible: layerVisibility.value.roads,
      popupEnabled: false,
      renderer: {
        type: 'unique-value',
        field: 'RoadType',
        defaultSymbol: {
          type: 'simple-line',
          color: [128, 128, 128, 0.8], // 灰色默认
          width: 3
        },
        uniqueValueInfos: [
          {
            value: '主干道',
            symbol: {
              type: 'simple-line',
              color: [255, 0, 0, 0.9], // 红色
              width: 6
            }
          },
          {
            value: '次干道',
            symbol: {
              type: 'simple-line',
              color: [255, 165, 0, 0.8], // 橙色
              width: 4
            }
          },
          {
            value: '支路',
            symbol: {
              type: 'simple-line',
              color: [255, 255, 0, 0.8], // 黄色
              width: 3
            }
          },
          {
            value: '步行道',
            symbol: {
              type: 'simple-line',
              color: [0, 255, 0, 0.8], // 绿色
              width: 2,
              style: 'dash'
            }
          },
          {
            value: '自行车道',
            symbol: {
              type: 'simple-line',
              color: [0, 191, 255, 0.8], // 天蓝色
              width: 2,
              style: 'dot'
            }
          },
          // 校园推荐路线样式 - 增强视觉效果
          {
            value: '去图书馆推荐路线',
            symbol: {
              type: 'simple-line',
              color: [138, 43, 226, 0.9], // 紫色
              width: 6,
              style: 'solid',
              cap: 'round',
              join: 'round'
            }
          },
          {
            value: '去食堂推荐路线',
            symbol: {
              type: 'simple-line',
              color: [255, 20, 147, 0.9], // 深粉色
              width: 6,
              style: 'solid',
              cap: 'round',
              join: 'round'
            }
          },
          {
            value: '去宿舍推荐路线',
            symbol: {
              type: 'simple-line',
              color: [30, 144, 255, 0.9], // 道奇蓝
              width: 6,
              style: 'solid',
              cap: 'round',
              join: 'round'
            }
          },
          {
            value: '去教学楼推荐路线',
            symbol: {
              type: 'simple-line',
              color: [255, 140, 0, 0.9], // 深橙色
              width: 6,
              style: 'solid',
              cap: 'round',
              join: 'round'
            }
          },
          {
            value: '去体育馆推荐路线',
            symbol: {
              type: 'simple-line',
              color: [50, 205, 50, 0.9], // 酸橙绿
              width: 6,
              style: 'solid',
              cap: 'round',
              join: 'round'
            }
          },
          {
            value: '去实验楼推荐路线',
            symbol: {
              type: 'simple-line',
              color: [220, 20, 60, 0.9], // 深红色
              width: 6,
              style: 'solid',
              cap: 'round',
              join: 'round'
            }
          },
          {
            value: '校园观光路线',
            symbol: {
              type: 'simple-line',
              color: [255, 215, 0, 0.9], // 金色
              width: 7,
              style: 'dash-dot',
              cap: 'round',
              join: 'round'
            }
          },
          {
            value: '晨跑推荐路线',
            symbol: {
              type: 'simple-line',
              color: [0, 250, 154, 0.9], // 中春绿
              width: 5,
              style: 'dash',
              cap: 'round',
              join: 'round'
            }
          }
        ]
      } as any,
      popupTemplate: {
        title: '道路信息',
        content: [
          {
            type: 'fields',
            fieldInfos: [
              { fieldName: 'name', label: '道路名称' },
              { fieldName: 'RoadType', label: '道路类型' },
              { fieldName: 'OBJECTID', label: 'ID' }
            ]
          }
        ]
      }
    })

    map.addMany([buildingLayer, facilitiesLayer, roadsLayer])
    ElMessage.success('图层加载成功，已应用自定义样式')
  } catch (error) {
    console.error('加载图层失败', error)
    ElMessage.error('加载图层失败')
  }
}

// 切换图层可见性
function toggleLayerVisibility(layerType: string) {
  switch (layerType) {
    case 'building':
      if (buildingLayer) {
        buildingLayer.visible = Boolean(layerVisibility.value.building)
      }
      break
    case 'facilities':
      if (facilitiesLayer) {
        facilitiesLayer.visible = Boolean(layerVisibility.value.facilities)
      }
      break
    case 'roads':
      if (roadsLayer) {
        roadsLayer.visible = Boolean(layerVisibility.value.roads)
      }
      break
  }
}

// 按名称搜索道路
const searchRoadByName = async () => {
  if (!roadsLayer || !roadSearchText.value.trim()) {
    ElMessage.warning('请输入道路名称')
    return
  }

  try {
    const query = new Query({
      where: `name LIKE '%${roadSearchText.value.trim()}%'`,
      outFields: ['*'],
      returnGeometry: true
    })

    const result = await roadsLayer.queryFeatures(query)
    searchResults = result.features

    if (searchResults.length > 0) {
      searchResultVisible.value = true
    } else {
      ElMessage.info('未找到匹配的道路')
    }
  } catch (error) {
    console.error('搜索失败:', error)
    ElMessage.error('搜索失败')
  }
}

// 按类型筛选道路
const filterRoadsByType = async () => {
  if (!roadsLayer) return

  try {
    let whereClause = '1=1'
    if (selectedRoadType.value) {
      whereClause = `RoadType = '${selectedRoadType.value}'`
    }

    const query = new Query({
      where: whereClause,
      outFields: ['*'],
      returnGeometry: true
    })

    const result = await roadsLayer.queryFeatures(query)

    // 清除之前的高亮
    clearHighlights()

    // 高亮筛选结果
    if (result.features.length > 0) {
      highlightRoads(result.features)
      ElMessage.success(`找到 ${result.features.length} 条${selectedRoadType.value || ''}道路`)
    } else {
      ElMessage.info('未找到匹配的道路')
    }
  } catch (error) {
    console.error('筛选失败:', error)
    ElMessage.error('筛选失败')
  }
}

// 显示所有道路
const showAllRoads = () => {
  selectedRoadType.value = ''
  roadSearchText.value = ''
  clearHighlights()
  if (roadsLayer) {
    roadsLayer.visible = true
  }
  ElMessage.success('已显示所有道路')
}

// 显示道路详情
function showRoadDetails(road: Graphic) {
  selectedRoad = road
  showRoadInfo.value = true

  // 高亮选中的道路
  highlightRoad()
}

// 选择搜索结果
function selectSearchResult(road: Graphic) {
  searchResultVisible.value = false
  showRoadDetails(road)

  // 缩放到选中的道路
  if (road.geometry) {
    view.goTo(road.geometry)
  }
}

// 高亮道路
function highlightRoad() {
  if (!selectedRoad || !view) return

  // 清除之前的高亮
  clearHighlights()

  // 创建高亮图形
  highlightGraphic = new Graphic({
    geometry: selectedRoad.geometry,
    symbol: {
      type: 'simple-line',
      color: [255, 0, 0, 0.8],
      width: 5
    } as any
  })

  view.graphics.add(highlightGraphic)
}

// 高亮多条道路
function highlightRoads(roads: Graphic[]) {
  if (!view) return

  roads.forEach(road => {
    const graphic = new Graphic({
      geometry: road.geometry,
      symbol: {
        type: 'simple-line',
        color: [0, 255, 255, 0.6],
        width: 4
      } as any
    })
    view.graphics.add(graphic)
  })
}

// 缩放到道路
function zoomToRoad() {
  if (selectedRoad && selectedRoad.geometry && view) {
    view.goTo(selectedRoad.geometry)
  }
}

// 缩放到全图
function zoomToFullExtent() {
  if (view) {
    view.goTo({
      center: [116.79344073176162, 36.53820494873281],
      zoom: 16
    })
  }
}

// 清除高亮
function clearHighlights() {
  if (view) {
    view.graphics.removeAll()
  }
  highlightGraphic = null
}

// 加载道路统计
async function loadRoadStatistics() {
  if (!roadsLayer) return

  try {
    const query = new Query({
      where: '1=1',
      outFields: ['RoadType'],
      returnGeometry: false
    })

    const result = await roadsLayer.queryFeatures(query)

    // 重置统计
    Object.assign(roadStatistics, {
      total: 0,
      main: 0,
      secondary: 0,
      branch: 0,
      walk: 0,
      library: 0,
      canteen: 0,
      dormitory: 0,
      teaching: 0,
      gym: 0,
      lab: 0,
      sightseeing: 0,
      jogging: 0,
      other: 0
    })

    // 统计各类型道路数量
    result.features.forEach(feature => {
      const roadType = feature.attributes.RoadType
      roadStatistics.total++

      switch (roadType) {
        case '主干道':
          roadStatistics.main++
          break
        case '次干道':
          roadStatistics.secondary++
          break
        case '支路':
          roadStatistics.branch++
          break
        case '步行道':
          roadStatistics.walk++
          break
        case '去图书馆推荐路线':
          roadStatistics.library++
          break
        case '去食堂推荐路线':
          roadStatistics.canteen++
          break
        case '去宿舍推荐路线':
          roadStatistics.dormitory++
          break
        case '去教学楼推荐路线':
          roadStatistics.teaching++
          break
        case '去体育馆推荐路线':
          roadStatistics.gym++
          break
        case '去实验楼推荐路线':
          roadStatistics.lab++
          break
        case '校园观光路线':
          roadStatistics.sightseeing++
          break
        case '晨跑推荐路线':
          roadStatistics.jogging++
          break
        default:
          roadStatistics.other++
      }
    })
  } catch (error) {
    console.error('加载统计失败:', error)
  }
}

// 显示道路统计
function showRoadStatistics() {
  statisticsVisible.value = true
}

// 获取道路类型颜色
function getRoadTypeColor(roadType: string) {
  switch (roadType) {
    case '主干道':
      return 'danger'
    case '次干道':
      return 'warning'
    case '支路':
      return 'info'
    case '步行道':
      return 'success'
    // 校园推荐路线颜色
    case '去图书馆推荐路线':
      return 'primary'
    case '去食堂推荐路线':
      return 'danger'
    case '去宿舍推荐路线':
      return 'primary'
    case '去教学楼推荐路线':
      return 'warning'
    case '去体育馆推荐路线':
      return 'success'
    case '去实验楼推荐路线':
      return 'danger'
    case '校园观光路线':
      return 'warning'
    case '晨跑推荐路线':
      return 'success'
    default:
      return ''
  }
}

// 获取道路图片类样式
function getRoadImageClass(roadType: string) {
  switch (roadType) {
    case '主干道':
      return 'main-road-img'
    case '次干道':
      return 'secondary-road-img'
    case '支路':
      return 'branch-road-img'
    case '步行道':
      return 'walk-road-img'
    default:
      return 'default-road-img'
  }
}

// 选择推荐路线
function selectRecommendedRoute(route: any) {
  selectedRecommendedRoute.value = route.type
  selectedRoadType.value = route.type
  filterRoadsByType()
  ElMessage.success(`已选择${route.name}`)
}

// 显示路线详情
function showRouteDetails(route: any) {
  selectedRouteDetail.value = route
  showRouteDetailPanel.value = true
}

// 高亮推荐路线
async function highlightRecommendedRoute() {
  if (!selectedRouteDetail.value || !roadsLayer) return

  try {
    const query = new Query({
      where: `RoadType = '${selectedRouteDetail.value.type}'`,
      outFields: ['*'],
      returnGeometry: true
    })

    const result = await roadsLayer.queryFeatures(query)

    // 清除之前的高亮
    clearHighlights()

    if (result.features.length > 0) {
      // 高亮路线
      result.features.forEach(feature => {
        const graphic = new Graphic({
          geometry: feature.geometry,
          symbol: {
            type: 'simple-line',
            color: [255, 255, 0, 0.8], // 黄色高亮
            width: 8,
            style: 'solid'
          } as any
        })
        view.graphics.add(graphic)
      })

      // 缩放到路线
      if (result.features[0].geometry) {
        view.goTo(result.features[0].geometry)
      }

      ElMessage.success('已在地图上高亮显示该路线')
    } else {
      ElMessage.warning('未找到该推荐路线')
    }
  } catch (error) {
    console.error('高亮路线失败:', error)
    ElMessage.error('高亮路线失败')
  }
}

// 在地图上选择推荐路线
function selectRecommendedRouteOnMap() {
  highlightRecommendedRoute()
  showRouteDetailPanel.value = false
  selectedRecommendedRoute.value = selectedRouteDetail.value.type
}

// 切换推荐路线面板显示状态
function toggleRoutesPanel() {
  showRoutesPanel.value = !showRoutesPanel.value
}
</script>

<style scoped>
.road-map-container {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
}

.road-map-view {
  width: 100%;
  height: 100%;
}

/* 推荐路线面板 */
.recommended-routes-panel {
  position: absolute;
  top: 20px;
  left: 20px;
  width: 380px;
  max-height: calc(100vh - 40px);
  overflow-y: auto;
  z-index: 10;
}

.routes-card {
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  margin-bottom: 16px;
  animation: slideInLeft 0.6s ease-out;
}

@keyframes slideInLeft {
  from {
    opacity: 0;
    transform: translateX(-30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.routes-grid {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-height: 400px;
  overflow-y: auto;
}

.route-card {
  display: flex;
  align-items: center;
  padding: 16px;
  border: 2px solid #e5e7eb;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.3s ease;
  background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
  position: relative;
  overflow: hidden;
}

.route-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(102, 126, 234, 0.1), transparent);
  transition: left 0.5s ease;
}

.route-card:hover {
  border-color: #667eea;
  box-shadow: 0 6px 20px rgba(102, 126, 234, 0.2);
  transform: translateY(-3px);
}

.route-card:hover::before {
  left: 100%;
}

.route-card.active {
  border-color: #667eea;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  animation: pulse 2s infinite;
}

.route-card.active .route-info h4,
.route-card.active .route-info p {
  color: white;
}

@keyframes pulse {
  0% {
    box-shadow: 0 6px 20px rgba(102, 126, 234, 0.3);
  }
  50% {
    box-shadow: 0 8px 25px rgba(102, 126, 234, 0.5);
  }
  100% {
    box-shadow: 0 6px 20px rgba(102, 126, 234, 0.3);
  }
}

.route-icon {
  margin-right: 12px;
  flex-shrink: 0;
  transition: transform 0.3s ease;
}

.route-card:hover .route-icon {
  transform: scale(1.1) rotate(5deg);
}

.route-card.active .route-icon {
  animation: bounce 1s infinite;
}

@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-5px);
  }
  60% {
    transform: translateY(-3px);
  }
}

.route-info {
  flex: 1;
  min-width: 0;
}

.route-info h4 {
  margin: 0 0 4px 0;
  font-size: 14px;
  font-weight: 600;
  color: #374151;
}

.route-info p {
  margin: 0 0 8px 0;
  font-size: 12px;
  color: #6b7280;
  line-height: 1.4;
}

.route-stats {
  display: flex;
  gap: 8px;
  align-items: center;
}

.route-stats .time {
  font-size: 11px;
  color: #059669;
  font-weight: 500;
}

.route-stats .difficulty {
  font-size: 11px;
  padding: 2px 6px;
  border-radius: 4px;
  font-weight: 500;
}

.route-stats .difficulty.easy {
  background-color: #d1fae5;
  color: #065f46;
}

.route-stats .difficulty.medium {
  background-color: #fef3c7;
  color: #92400e;
}

.route-stats .difficulty.hard {
  background-color: #fee2e2;
  color: #991b1b;
}

.route-action {
  margin-left: 8px;
  flex-shrink: 0;
}

/* 搜索控制面板 */
.search-control-panel {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 320px;
  z-index: 10;
}

.search-card {
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.card-title {
  font-size: 16px;
  font-weight: 600;
  color: #2c3e50;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  padding: 8px;
  border-radius: 8px;
  transition: all 0.3s ease;
}

.card-title:hover {
  background-color: #f8fafc;
  color: #667eea;
}

.title-content {
  display: flex;
  align-items: center;
  gap: 8px;
}

.collapse-icon {
  transition: transform 0.3s ease;
  color: #6b7280;
}

.collapse-icon.is-collapsed {
  transform: rotate(-90deg);
}

/* 帮助按钮 */
.help-button {
  position: absolute;
  bottom: 20px;
  right: 20px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  padding: 12px 20px;
  border-radius: 25px;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  transition: all 0.3s ease;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 500;
}

.help-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
}

/* 抽屉样式 */
.custom-drawer {
  border-radius: 12px 0 0 12px;
}

.help-panel,
.road-detail {
  padding: 20px;
  background-color: #f9f9f9;
  height: 100%;
}

.drawer-header {
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 2px solid #667eea;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.version-tag {
  background-color: #667eea;
  color: white;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: bold;
}

.help-content h3 {
  margin-top: 24px;
  margin-bottom: 16px;
  color: #667eea;
  font-weight: 600;
}

.feature-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.feature-list li {
  padding: 8px 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.feature-list .el-icon {
  color: #667eea;
}

/* 道路类型图例 */
.road-type-legend {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 10px;
}

.legend-item {
  display: flex;
  align-items: center;
  gap: 10px;
}

.road-line {
  width: 30px;
  height: 4px;
  border-radius: 2px;
}

.road-line.main {
  background-color: #e74c3c;
}

.road-line.secondary {
  background-color: #f39c12;
}

.road-line.branch {
  background-color: #3498db;
}

.road-line.walk {
  background-color: #27ae60;
}

/* 校园推荐路线样式 */
.road-line.library {
  background-color: #8A2BE2;
}

.road-line.canteen {
  background-color: #FF1493;
}

.road-line.dormitory {
  background-color: #1E90FF;
}

.road-line.teaching {
  background-color: #FF8C00;
}

.road-line.gym {
  background-color: #32CD32;
}

.road-line.lab {
  background-color: #DC143C;
}

.road-line.sightseeing {
  background-color: #FFD700;
}

.road-line.jogging {
  background-color: #00FA9A;
}

/* 推荐路线详情面板 */
.route-detail-drawer {
  border-radius: 12px 0 0 12px;
}

.route-detail {
  padding: 24px;
  background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
  height: 100%;
  overflow-y: auto;
}

.route-header {
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 2px solid #667eea;
}

.route-title {
  display: flex;
  align-items: center;
  gap: 16px;
}

.route-title h2 {
  margin: 0;
  color: #1e293b;
  font-size: 24px;
  font-weight: 700;
}

.route-subtitle {
  margin: 4px 0 0 0;
  color: #64748b;
  font-size: 14px;
}

.route-preview-image {
  margin: 20px 0;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.preview-container {
  height: 160px;
  background-size: cover;
  background-position: center;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.preview-overlay {
  background: rgba(0, 0, 0, 0.4);
  padding: 12px 20px;
  border-radius: 8px;
  backdrop-filter: blur(4px);
}

.route-stats-detail {
  margin: 20px 0;
  padding: 16px;
  background: white;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.stat-item {
  text-align: center;
}

.stat-value {
  font-size: 18px;
  font-weight: 700;
  color: #1e293b;
  margin-bottom: 4px;
}

.stat-label {
  font-size: 12px;
  color: #64748b;
  font-weight: 500;
}

.route-features h3,
.route-recommendations h3,
.route-tips h3 {
  margin: 20px 0 12px 0;
  color: #1e293b;
  font-size: 16px;
  font-weight: 600;
}

.features-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.feature-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: white;
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.feature-item .el-icon {
  color: #f59e0b;
}

.route-recommendations p {
  line-height: 1.6;
  color: #374151;
  margin: 0;
  padding: 12px;
  background: white;
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.route-tips ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.route-tips li {
  padding: 8px 12px;
  margin-bottom: 6px;
  background: white;
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  position: relative;
  padding-left: 24px;
}

.route-tips li::before {
  content: '•';
  color: #667eea;
  font-weight: bold;
  position: absolute;
  left: 12px;
}

.route-actions {
  margin-top: 24px;
  padding-top: 16px;
  border-top: 1px solid #e2e8f0;
}

/* 道路详情 */
.road-detail {
  padding: 20px;
  background-color: #f9f9f9;
  height: 100%;
}

.road-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 2px solid #667eea;
}

.road-title {
  display: flex;
  align-items: center;
  gap: 10px;
}

.road-title h2 {
  margin: 0;
  color: #333;
}

.road-image-container {
  margin: 16px 0;
  height: 120px;
  overflow: hidden;
  border-radius: 8px;
}

.road-image {
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  transition: transform 0.3s ease;
}

.road-image:hover {
  transform: scale(1.05);
}

.main-road-img {
  background-image: linear-gradient(rgba(0,0,0,0.3), rgba(0,0,0,0.3)), url('https://picsum.photos/id/1033/600/300');
}

.secondary-road-img {
  background-image: linear-gradient(rgba(0,0,0,0.3), rgba(0,0,0,0.3)), url('https://picsum.photos/id/1034/600/300');
}

.branch-road-img {
  background-image: linear-gradient(rgba(0,0,0,0.3), rgba(0,0,0,0.3)), url('https://picsum.photos/id/1035/600/300');
}

.walk-road-img {
  background-image: linear-gradient(rgba(0,0,0,0.3), rgba(0,0,0,0.3)), url('https://picsum.photos/id/1036/600/300');
}

.default-road-img {
  background-image: linear-gradient(rgba(0,0,0,0.3), rgba(0,0,0,0.3)), url('https://picsum.photos/id/1037/600/300');
}

.road-info {
  margin-bottom: 16px;
}

.road-actions {
  display: flex;
  gap: 10px;
  margin-top: 20px;
}

/* 搜索结果 */
.search-result-dialog {
  border-radius: 12px;
}

.result-summary {
  margin-bottom: 16px;
  padding: 12px;
  background-color: #f0f9ff;
  border-radius: 8px;
  color: #0369a1;
  font-weight: 500;
}

.search-results {
  max-height: 400px;
  overflow-y: auto;
}

.result-item {
  padding: 16px;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  margin-bottom: 12px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.result-item:hover {
  border-color: #667eea;
  box-shadow: 0 2px 8px rgba(102, 126, 234, 0.1);
  transform: translateY(-1px);
}

.result-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.result-header h4 {
  margin: 0;
  color: #374151;
}

.result-info {
  color: #6b7280;
  font-size: 14px;
}

.road-id {
  font-family: monospace;
}

/* 统计面板 */
.statistics-content {
  padding: 20px;
}

/* 响应式设计 */
@media (max-width: 1200px) {
  .recommended-routes-panel {
    width: 320px;
  }

  .search-control-panel {
    width: 280px;
  }
}

@media (max-width: 768px) {
  .recommended-routes-panel {
    width: calc(100% - 40px);
    top: 10px;
    left: 20px;
    right: 20px;
    max-height: 200px;
  }

  .routes-grid {
    max-height: 150px;
  }

  .route-card {
    padding: 12px;
  }

  .route-info h4 {
    font-size: 13px;
  }

  .route-info p {
    font-size: 11px;
  }

  .search-control-panel {
    width: calc(100% - 40px);
    top: 220px;
    left: 20px;
    right: 20px;
  }

  .help-button {
    bottom: 10px;
    right: 20px;
    padding: 8px 12px;
    font-size: 12px;
  }

  .route-detail {
    padding: 16px;
  }

  .route-title h2 {
    font-size: 20px;
  }

  .preview-container {
    height: 120px;
  }
}
</style>
